<!DOCTYPE html>
<!-- SPDX-License-Identifier: GPL-3.0-or-later OR CC-BY-SA-4.0 -->
<html lang="en">
  <head>
    <title>App Manager Docs</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8" />
    <meta name="Description" content="User manual for App Manager" />
    <style>
        body {
            background: #dcaf74;
            color: #212121;
            font-family: Helvetica Nueue, Helvetica, sans-serif;
        }

        #middle {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 340px;
        }

        #flex {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
        }

        #logo-holder {
            flex: 1 0 0;
            padding: 10px;
            max-width: 200px;
        }

        #logo {
            max-width: 100%;
            min-width: 180px;
            box-shadow: inset 0 0 1px 1px #212121, 0 0 5px 0 #212121;
            border-radius: 50%;
        }

        #content {
            flex: 2 0 0;
            padding: 10px;
            text-align: start;
        }

        #app {
            font-size: 500%;
            text-shadow: 0 0 2px #212121;
        }

        #manager {
            font-size: 500%;
            font-weight: bold;
            text-shadow: 0 0 2px #212121;
        }

        #language {
            appearance: none;
            border: 1px solid #cb9e63;
            border-radius: 4px;
            padding: 4px 8px;
            margin: 4px;
            width: 100%;
            outline: none;
            font-size: 20px;
            background-image: linear-gradient(to bottom, #dcaf74, #cb9e63);
            background-color: #cb9e63;
        }
    </style>
    <script>
        function onLoadLanguage(e) {
            let lang = e.selectedOptions[0].value;
            let url = document.location.href;
            if (url.endsWith("index.html")) {
                url = url.replace("index.html", "")
            }
            if (!url.endsWith("/")) {
                url += '/';
            }
            document.location.assign(url + lang + '/');
        }
    </script>
  </head>
  <body onLoad="document.getElementById('middle').style['min-height']=window.innerHeight + 'px';">
    <div id="middle">
      <div id="flex">
        <div id="logo-holder">
          <img src="./images/icon.png" id="logo" />
        </div>
        <div id="content">
          <div id="app">App</div>
          <div id="manager">Manager</div>
          <div>
            <select id="language" name="language" onChange="onLoadLanguage(this);">
              <option value="" selected disabled>Select Language</option>
              <option value="en">English</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
